<template>
	<view class="user-index">
		<header>
			<view class="userinfo">
				<img src="/static/user/user.png" alt="">
				<p>登录 / 注册 ></p>
				<div class="setting" @tap="toPage('/pages/user/settings')"><img src="/static/user/setting.png" alt=""></div>
			</view>
			<view class="user-stat">
				<view class="stat-item">
					<p>10</p>
					<text>商品收藏</text>
				</view>
				<view class="stat-item">
					<p>10</p>
					<text>店铺收藏</text>
				</view>
				<view class="stat-item">
					<p>10</p>
					<text>我的足迹</text>
				</view>
			</view>
		</header>
		<main>
			<view class="block order">
				<navigator class="order-item" url="/pages/tabbar/order">
					<img src="/static/user/to-pay.png" alt="">
					<text>待付款</text>
				</navigator>
				<navigator class="order-item" url="/pages/tabbar/order">
					<img src="/static/user/to-receive.png" alt="">
					<text>待收货</text>
				</navigator>
				<navigator class="order-item" url="/pages/tabbar/order">
					<img src="/static/user/to-edit.png" alt="">
					<text>待评价</text>
				</navigator>
				<navigator class="order-item" url="/pages/tabbar/order">
					<img src="/static/user/change-refund.png" alt="">
					<text>退还/售后</text>
				</navigator>
			</view>
			<view class="block discount">
				<navigator>
					<text class="discount-num">0</text>
					<text>优惠券</text>
				</navigator>
				<navigator>
					<text class="discount-num">0</text>
					<text>积分</text>
				</navigator>
				<navigator>
					<text class="discount-num">0.00</text>
					<text>余额(元)</text>
				</navigator>
			</view>
			<view class="block tools">
				<navigator>
					<img src="/static/user/gift.png" alt="">
					<text>邀请有礼</text>
				</navigator>
				<navigator>
					<img src="/static/user/partner.png" alt="">
					<text>团长</text>
				</navigator>
				<navigator>
					<img src="/static/user/service.png" alt="">
					<text>客服</text>
				</navigator>
				<navigator>
					<img src="/static/user/question.png" alt="">
					<text>帮助与反馈</text>
				</navigator>
				<navigator>
					<img src="/static/user/question.png" alt="">
					<text>关于平台</text>
				</navigator>
			</view>
		</main>
	</view>
</template>

<script>
	export default {
		data () {
			return {}
		},
		methods: {
			toPage (url) {
				uni.navigateTo({url})
			}
		}
	}
</script>

<style scoped lang="scss">
.user-index {
	header {
		padding: 15px 20px;
		box-sizing: border-box;
		background: #FF3D3D;
		color: #fff;
		// 头像、名称
		.userinfo {
			display: flex;
			align-items: center;
			position: relative;
			img {
				height: 50px;
				width: 50px;
				border-radius: 50%;
			}
			p {
				flex: 3;
				margin-left: 15px;
				font-size: 20px;
			}
			.setting {
				position: absolute;
				top: 10px;
				right: 0px;
				img {
					height: 23px;
					width: 23px;
				}
			}
		}
		// 足迹
		.user-stat {
			display: flex;
			justify-content: space-between;
			padding: 0 20px;
			box-sizing: border-box;
			font-size: 14px;
			.stat-item {
				text-align: center;
				p {
					font-weight: 600;
					font-size: 15px;
					line-height: 30px;
				}
			}
			
		}
	}
	main {
		margin-top: -5px;
		background: #f5f5f5;
		border-radius: 5px 5px 0 0;
		color: #555;
		.block {
			border-radius: 6px;
			padding: 10px;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			align-content: center;
			background: #fff;
			margin-bottom: 15px;
			font-size: 14px;
			navigator {
				display: flex;
				flex-direction: column;
				align-items: center;
				img {
					height: 35px;
					width: 35px;
				}
				text {
					line-height: 26px;
				}
			}
		}
		// 积分
		.discount {
			.discount-num {
				font-weight: 600;
				line-height: 40px;
			}
		}
		// 工具
		.tools {
			justify-content: inherit;
			navigator {
				width: 24%;
				margin: 10px 0;
			}
		}
	}
}
</style>
